<template>
    <div>
        <el-form inline>
            <el-form-item>
                <el-input v-model="where.fPictureName" placeholder="请输入查询内容" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="search">查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-input v-model="fPictureName" placeholder="请输入图片名称" clearable/>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" v-if="!fPictureName" @click="upTip">上传</el-button>
                <FileUpload v-else :value="fPictureUrl" :limit="1" :isShowTip="false" @input="uploadFile($event)"
                    :fileType="['bin']"></FileUpload>
            </el-form-item>
        </el-form>
        <el-table :data="tableData" style="width: 100%" @row-click="checkProduct">
            <el-table-column label="选择" width="50">
                <template slot-scope="scope">
                    <el-radio :value="checkData.fId" :label="scope.row.fId"></el-radio>
                </template>
            </el-table-column>
            <el-table-column label="文件名称">
                <template slot-scope="scope">
                    <div class="el-input-div">{{ scope.row.fPictureName }}</div>
                </template>
            </el-table-column>
            <el-table-column label="文件">
                <template slot-scope="scope">
                    <el-link :href="scope.row.fPictureUrl?scope.row.fPictureUrl:''" :underline="false" target="_blank">
                        <span class="el-icon-document"> {{ scope.row.fPictureUrl ? getFileName(scope.row.fPictureUrl) : ''  }} </span>
                    </el-link>
                </template>
            </el-table-column>
            <el-table-column prop="fCreateDate" label="上传时间"></el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="where.pageNum" :limit.sync="where.pageSize"
            @pagination="getList" />
        <div slot="footer" class="dialog-footer">
            <el-button @click="close">取 消</el-button>
            <el-button type="primary" @click="toSure">确认</el-button>
        </div>
    </div>
</template>

<script>
import { pictureLst, picture } from '@/api/workOrder/administration'
export default {
    name: 'uploadImg',
    data() {
        return {
            show: false,
            where: {
                pageNum: 1,
                pageSize: 10,
                fDeviceModel: ''
            },
            tableData: [],
            total: 0,
            checkData: {},
            fPictureUrl: '',
            fPictureName:''
        }
    },
    created() {
        this.getList()
    },
    methods: {
        search(){
            this.getList()
        },
        upTip(){
            if(!this.fPictureName){
                return this.$message({
                    message: '请输入图片名称',
                    type: 'warning'
                })
            }
        },
        uploadFile(e) {
            if(!this.fPictureName){
                return this.$message({
                    message: '请输入图片名称',
                    type: 'warning'
                })
            }
            console.log(e)
            if(!e){
                return
            }
            // this.form.fPictureUrl = e
            // this.$refs.draw.pictureUrl = e
            picture({fPictureUrl:e,fPictureName:this.fPictureName}).then(res=>{
                if(res.code == 200){
                    // this.form.fPictureUrl = res.data
                    this.fPictureUrl = ''
                    this.getList()
                }else{
                    this.$message.error(res.msg)
                }
            })
        },
        // 获取文件名称
        getFileName(name) {
            // 如果是url那么取最后的名字 如果不是直接返回
            if (name.lastIndexOf("/") > -1) {
                return name.slice(name.lastIndexOf("/") + 1);
            } else {
                return name;
            }
        },
        getList() {
            this.fPictureName = ''
            pictureLst(this.where).then(res => {
                this.tableData = res.rows
                this.total = res.total
            })
        },
        checkProduct(row) {
            this.checkData = row
        },
        toSure() {
            if(!this.checkData.fId){
               return this.$message({
                    message: '请选择文件',
                    type: 'warning'
                })
            }
            this.show = false
            this.$emit("sure", this.checkData)
            this.checkData = {}
            this.where.fPictureName = ''
            this.fPictureName = ''
            this.getList()
        },
        close(){
            this.$emit("close")
            this.checkData = {}
            this.where.fPictureName = ''
            this.fPictureName = ''
            this.getList()
        },
    }
}
</script>

<style lang="scss" scoped>
::v-deep .el-radio__label {
    display: none;
}
.el-input-div {
  width: 202px;
  white-space: nowrap; // 强制一行显示
  overflow: hidden; // 超出隐藏
  text-overflow: ellipsis; // 省略号
}
</style>